<template>
  <div class="home-wrap">
    <div class="home-headerwrap">
      <header class="home-header">
        <div @click="showLibrary">
          <span class="icon-网易云音乐_自制"></span>
        </div>
        <div @click="serch">
          <span class="icon-搜索_搜索"></span>
        </div>
        <div class="flex jc-c ai-c" @click="mine">
          <span class="avatar-box">
            <img class="avatar-img" :src="avatarUrl" v-if="avatarUrl" />
            <span class="avatar-placeholder" v-else>请登录</span>
          </span>
        </div>
      </header>
    </div>
    <login-dialog></login-dialog>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import loginDialog from "../../components/loginDialog.vue";
import { Vue, Component } from "vue-property-decorator";
import Router from "vue-router";
import { namespace } from "vuex-class";
import { LoginResponse } from "@/model/response-type.model";
import { APIType } from "@/api";
const AppModule = namespace("app");
@Component({
  components: { loginDialog },
})
export default class HomeComponent extends Vue {

  $router: Router;
  $api: APIType;

  @AppModule.Mutation("setLoginDialogVisible")
  public setLoginDialogVisible: (value: boolean) => void;
  @AppModule.State("userInfo")
  public userInfo: LoginResponse;
  @AppModule.Mutation("setUserInfo")
  public setUserInfo: (value: Partial<LoginResponse>) => void;

  mounted() {
    this.$api.loginStatus().then(res => {
      if (res.account) {
        this.setUserInfo(res);
        this.setLoginDialogVisible(false);
      } else {
        this.setUserInfo({});
      }
    })
  }

  get avatarUrl() {
    return this.userInfo?.profile?.avatarUrl;
  }

  showLibrary() {
    this.$router.push({ path: "/musicLibrary" }).catch((err) => err);
  }

  mine() {
    // 如果已经登录过则跳转到用户页面
    if (!this.avatarUrl) {
      this.setLoginDialogVisible(true);
    } else {
      this.$router.push({path: '/user'});
    }
  }
  serch() {
    this.$router.push({ path: "/searchPage" }).catch((err) => err);
  }
}
</script>

<style lang="scss" scoped>
.home-wrap {
  width: 100%;
  height: 100%;
  font-size: 0.3rem;
  .home-headerwrap {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
  }
}
.home-header {
  display: flex;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.5rem;
  background-color: #df2d2d;
}
.home-header > div {
  flex: 1;
  text-align: center;
  cursor: pointer;
  color: #fff;
}
.icon {
  height: 0.3rem;
  width: 0.3rem;
}
.flex {
  display: flex;
}
.jc-c {
  justify-content: center;
}
.ai-c{
  align-items: center;
}
.avatar-box{
  height: 0.6rem;
  width: 0.6rem;
  background: #ccc;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  .avatar-img {
    width: 100%;
    height: 100%;
  }
  .avatar-placeholder {
    font-size: 0.12rem;
    color: #f8f8f8;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
  }
}
</style>
